<script setup>
import {ref, watch} from 'vue';
const value = ref('手持弹幕')

watch(value, (value) => {
switch(value){
  case 'hj':
    break;
  case 'qfsx':
    uni.navigateTo({
      url: '/pages/index/index',
    })
    break;
}
})
</script>

<template>
  <view class="bigBox">
    <view class="titlebox">
      <view class="title">
        {{value}}
      </view>
    </view>

    <view id="form">
       <up-input
        placeholder="请输入内容"
        border="surround"
        v-model="value"
        customStyle="background:rgba(63, 63, 63, 0.18);"
    ></up-input>
    </view>

  </view>
</template>

<style scoped lang="scss">
.bigBox{
  background:black;
  width:100vw;
  height:100vh;
  #form{
    position: fixed;
    bottom:0;
    left:0;
    .text{
      background:#fff;

    }
  }
  .titlebox{
    transform: translateY(calc(-100vh)) rotate(90deg);
    animation: tts 4s infinite linear;
    .title{
      font-size:160rpx;
      width:100%;
      text-wrap: nowrap;
      color:#fff;
      animation: asd 0.3s infinite linear;
    }
  }
}
@keyframes tts {
  0%{
    transform: translateY(calc(-100vh - 100%)) rotate(90deg);
  }
  100%{
    transform: translateY(calc(100vh + 100%)) rotate(90deg);
  }
}
/* 抖动字幕效果 */
@keyframes asd {
  0%, 32% { text-shadow: 3px -3px 0px #FE008E, -5px 5px 0px #00FFFF; }
  33%, 65% { text-shadow: 5px -5px 0px #FE008E, -3px 3px 0px #00FFFF; }
  66%, 99% { text-shadow: 3px -3px 0px #00FFFF, -5px 5px 0px #FE008E; }
  100% { text-shadow: 5px -5px 0px #00FFFF, -3px 3px 0px #FE008E; }
}


</style>